<template>
    <div class="fa_biao">
      <div class="fa_biaom" v-if="fabiaoshow">
        <span>心食谱，健康美味每一天！</span>
        <img src="/qttp/xxx.png" alt="" class="xxxgb" @click="setfs(false)">
        <hr>
        <el-form ref="form" :model="form" label-width="80px">
          <div class="fb_sf">
            <div>
              <el-form-item label="菜谱名称">
                <el-input v-model="form.rname" placeholder="请输入菜谱名称"></el-input>
              </el-form-item>
              <el-form-item label="菜品分类">
                <el-select v-model="form.cname" placeholder="请选择分类">
                  <el-option label="快手菜" value="1"></el-option>
                  <el-option label="下饭菜" value="2"></el-option>
                  <el-option label="家常菜" value="3"></el-option>
                  <el-option label="应季菜" value="7"></el-option>
                  <el-option label="汤水类" value="6"></el-option>
                  <el-option label="素食类" value="4"></el-option>
                  <el-option label="肉食类" value="5"></el-option>
                  <el-option label="甜点类" value="8"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- 上传图片 -->
            <div>
              <el-upload
                class="upload-demo"
                drag
                action="http://localhost:3000/upload"
                name="uploadFile"
                multiple
                :on-success="handleUploadSuccess"
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">拖拽或点击上传图片</div>
                <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
              </el-upload>
            </div>
            <!-- <el-form-item label="">
            </el-form-item> -->
          </div>
          <el-form-item label="菜品简介">
            <el-input type="textarea" v-model="form.synopsis" placeholder="请输入菜品简介"></el-input>
          </el-form-item>
          <el-form-item label="菜品食材">
            <el-input type="textarea" v-model="form.material" placeholder="请输入菜品食材"></el-input>
          </el-form-item>
          <el-form-item label="菜品做法">
            <el-input type="textarea" v-model="form.practice" placeholder="请输入菜品做法"></el-input>
          </el-form-item>
          <el-form-item label="独家秘诀">
            <el-input v-model="form.knack" placeholder="请输入做法诀窍"></el-input>
          </el-form-item>
          <div class="fb_xf">
            <el-form-item label="菜品菜系">
              <el-input v-model="form.sort" placeholder="请输入菜系"></el-input>
            </el-form-item>
            <!-- <el-form-item label="关键词">
              <el-input v-model="form.sort"></el-input>
            </el-form-item> -->
            <el-form-item label="发布者">
              <el-input  disabled id="yhxm" v-model="username"></el-input>
            </el-form-item>
          </div>
          <el-form-item>
            <div class="fb_tj">
              <el-button type="primary" @click="onSubmit">立即发表</el-button>
              <el-button @click="resetdata()">重置数据</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex'
  export default {
    computed:{
      ...mapState(["fabiaoshow"],["loginname"])
    },
    // 显示发表时 接收姓名
    props:["username"],
    data() {
      return {
        form: {
          uname: '',
          // keywords:'',
          knack:'',
          sort:'',
          practice:'',
          material:'',
          synopsis:'',
          rname:'',
          cname:'',
          // region: '',
          // date1: '',
          // date2: '',
          delivery: false,
          type: [],
          // resource: '',
          // desc: ''
          
        },
        pic:[],
      }
    },
    mounted(){
      // this.zzmc()
    },
    watch: {
    },
    methods: {
      ...mapMutations(["setfs"]),
      handleUploadSuccess(res){
        console.log(res)
        this.pic.push(res.urls)
        console.log(this.pic)
      },

      resetdata(){
          this.form.knack=''
          this.form.sort=''
          this.form.practice=''
          this.form.material=''
          this.form.synopsis=''
          this.form.rname=''
          this.form.cname=''
          this.pic=[]
      },
      onSubmit() {
        // console.log('submit!');
        // console.log('提交表单',this.form);
        // 验证ref="form"的表单对象
        // form对象的validate()方法用于表单是否符合规则，验证完毕后会执行回调方法(valid)=>{},回传回来的valid用于描述 是否验证成功
        // this.$refs['form'].validate((valid)=>{
        //   if(valid){
        //     console.log("成功",this.form)
        //   }else{
        //     console.log("失败")
        //   }
        // })
        const url="/index2"//添加食谱接口
        const url1="/index3"//添加图片接口
        // post传参数据
        const params=`rname=${this.form.rname}&r_uname=${this.username}&r_pic=${this.pic[0]}&synopsis=${this.form.synopsis}&material=${this.form.material}&practice=${this.form.practice}&knack=${this.form.knack}&sort=${this.form.sort}&cname=${this.form.cname}`
        // console.log(params)
        // 发送请求
        this.axios.post(url,params).then((res)=>{
          // console.log(res)
          // 添加成功则继续添加图片
          if(res.data.code==200){
            for(var i=1;i<this.pic.length;i++){
              const params1=`sp_id=${res.data.r_id}&img_src=${this.pic[i]}`
              this.axios.post(url1,params1).then((res)=>{
                console.log(res)
              })
            }
          }
        })
        
      }
    }
  }
</script>

<style lang="scss">
  .fa_biaom{
    z-index: 1000;
    position: fixed;
    width: 500px; 
    height: 530px; 
    top: 80px; 
    left: calc(50% - 250px);
    background-image: linear-gradient(45deg,#FFEE99,#FFDD55,#FFEE99);
    // background-color: #fff;
    border-radius: 15px;
    // box-shadow: 4px 5px 5px 5px rgb(130, 130, 130);
    box-shadow:7px 7px 20px 4px rgb(99, 99, 99);
    // box-sizing: border-box;
    padding: 25px;
    padding-right: 30px;
    .xxxgb{
      position: absolute;
      z-index: 1000;
      top: 10px;
      right: 10px;
      width: 20px;
      cursor: pointer;
    }
    >span:first-child{
      font-size: 25px;
      display: block;
      width: 100%;
      text-align: center;
      margin-bottom: 5px;
      font-weight: 800;
    }
    hr{
      margin-bottom: 5px;
    }
    .upload-demo{
      width: 185px;
      height: 95px;
    }
    .el-upload-dragger{
      width: 185px;
      height: 95px;
      margin: 0;
      padding: 0;
      margin-top: 2px;
    }
    .fb_sf{
      display: flex;
      >div:first-child{
        margin-right: 10px;
        .el-input__inner{
          width: 220px;
          height: 38px;
        }
        li{
          height: 23px;
          line-height: 23px;
        }
      }
      >div:last-child{
        i{
          margin-top: 10px;
          margin-bottom: 5px;
        }
      }
    }
    .el-form-item__label{
      width: 60px !important;
      padding-right: 0;
    }
    .el-textarea__inner{
      resize:none;
    }
    .el-form-item{
      margin-bottom: 16px;
    }
    .fb_tj{
      margin-left: 60px;
      button{
        line-height: 8px;
      }
    }
    .fb_xf{
      display: flex;
    }
  }
</style>